<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'west',collapsed:false" style="width:210px">
        <div class="con" onselectstart="return false;" style="-moz-user-select:none;">
            <table id="attachmentCat"></table>
        </div>
    </div>
    <div data-options="region:'center'">
        <div id="tb<?php echo $uniqid;?>" style="padding:5px">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                <tr>
                    <td><a href="javascript:void(0);" id="uploadbox<?php echo $uniqid;?>" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-xiangji"></i><span class="l-btn-text">上传新图片</span></span></a></td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="attachmentCatAdd()" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-tianjia1"></i><span class="l-btn-text">添加分类</span></span></a></td>
                    <td>
                        <div class="datagrid-btn-separator"></div>
                    </td>
                    <td><a href="javascript:void(0);" onclick="attachmentReload();" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-shuaxin"></i><span class="l-btn-text">重载</span></span></a></td>
                    <td>&nbsp&nbsp;<input id="uploadboxKeywords" style="width:100px" type="text"
                                          class="easyui-input textbox"></td>
                    <td><a href="javascript:void(0);" onclick="attachmentSearch();" class="l-btn l-btn-small l-btn-plain"><span
                            class="l-btn-left l-btn-icon-left"><i class="iconfont icon-sousuo"></i><span class="l-btn-text">查询</span></span></a></td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="con"  style="-moz-user-select:none;">
            <table id="attachment"></table>
        </div>
    </div>
</div>

<script>
    var attachmentReload = function () {
        $("#attachment").datagrid('reload');
    };
    var attachmentSelect = function (url) {
        if(document.getElementById('<?php echo $acceptor;?>')) {
            UE.getEditor('<?php echo $acceptor;?>').setContent('<img src="' + url + '"/>', true);
        }else{
            let acceptr = eval('<?php echo $acceptor;?>');
            if ($.isArray(acceptr)) {
                acceptr.push(url);
            } else {
                eval("<?php echo $acceptor;?> = '" + url + "'");
            }
        }
        $("#uploadBox").dialog('close');
    };
    var attachmentDelete = function (id){
        $.messager.confirm('提示','确定删除图片吗？',function(r){
            if(r){
                $.messager.progress();
                $.post('/admin/index/attachmentdel', {id: id}, function(data){
                    $.messager.progress('close');
                    if(parseInt(data.ret)===0){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        attachmentReload();
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                },'json');
            }
        });
    };
    var attachmentSearch = function (cat_id = 0) {
        var height = 560 - 52;
        var width = 1100 - 210 - 3;
        $("#attachment").datagrid({
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: true,//如果为true，则显示一个行号列。
            pagination: true,//是否显示分页
            pageSize: 10,
            pageList: [10, 15, 20, 25],
            method: 'post',
            sortName: 'created_at',
            sortOrder: 'desc',
            idField: 'id',
            treeField: 'title',
            url: '/admin/index/uploadbox?cat_id=' + cat_id,
            queryParams: {keywords: $('#categorieskeywords').val()},
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            toolbar: '#tb<?php echo $uniqid;?>',
            columns: [[
                {
                    field: 'url', title: '预览', width: '6%', align:'center', formatter: function (value, rowData, rowIndex) {
                        if (value !== '') {
                            return '<a href="' + value + '" target="_blank"><img src="' + value + '?imageView2/1/w/40/h/40" style="height:40px;border-radius: 5px;"></a>';
                        } else {
                            return 'none';
                        }
                    }
                },
                {field: 'name', title: '文件名', width: '20%'},
                {field: 'type', title: '类型', width: '5%'},
                {field: 'width', title: '宽', width: '5%'},
                {field: 'height', title: '高', width: '5%'},
                {field: 'size', title: '大小', width: '8%'},
                {field: 'created_at', title: '上传时间', width: '10%', formatter: function (value, rowData, rowIndex) {
                        return value ? value.substr(0, 10) : '';
                    }
                },
                {field: 'action', title: '操作', align:'center', width: '20%', formatter: function (value, rowData, rowIndex) {
                        return '<a href="javascript:;" class="l-btn l-btn-small" onclick="attachmentSelect(\'' + rowData.url + '\')" ><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">选择</span><span class="l-btn-icon icon-ok">&nbsp;</span></span></a>' +
                            '&nbsp;' +
                            '<a href="javascript:;" class="l-btn l-btn-small" onclick="attachmentDelete(' + rowData.id + ')" ><span class="l-btn-left l-btn-icon-left"><span class="l-btn-text">删除</span><span class="l-btn-icon icon-cancel">&nbsp;</span></span></a>';
                    }
                }
            ]],
            onDblClickRow: function (index, rowData) {
                attachmentSelect(rowData.url);
            }
        });
    };

    var attachmentCatAdd = function () {
        $.messager.prompt('新类别', '请输入新的附件类别名称', function(r){
            if (r){
                $.post('/admin/index/attachmentcatadd', {name: r}, (data)=>{
                    if (parseInt(data.ret) === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        attachmentCatSearch();
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                });
            }
        });
    };
    var attachmentCatEdit = function (id) {
        $.messager.prompt('新类别', '请输入修改后的附件类别名称', function(r){
            if (r){
                $.post('/admin/index/attachmentcatedit', {id: id, name: r}, (data)=>{
                    if (parseInt(data.ret) === 0) {
                        $.messager.show({
                            title: '提示',
                            msg: data.msg,
                            timeout: 3000,
                            showType: 'slide'
                        });
                        $("#attachmentCat").datagrid('reload');
                    } else {
                        $.messager.alert('提示', data.msg, 'warning');
                    }
                });
            }
        });
        event.stopPropagation()
    };
    var attachmentCatDelete = function (id) {
        $.messager.confirm('提示','确定删除附件类目吗？',function(r){
            if(r){
                $.messager.progress();
                $.post('/admin/index/attachmentcatdel', {id: id}, function(data){
                    $.messager.progress('close');
                    if(parseInt(data.ret)===0){
                        $.messager.show({
                            title:'提示',
                            msg:data.msg,
                            timeout:3000,
                            showType:'slide'
                        });
                        $("#attachmentCat").datagrid('reload');
                    }else{
                        $.messager.alert('提示',data.msg,'warning');
                    }
                },'json');
            }
        });
        event.stopPropagation()
    };
    var selectAttachment = function () {
        var row = $('#attachmentCat').datagrid('getSelected');
        if (row) {
            attachmentSearch(row.id);
        }
    };
    var attachmentCatSearch = function () {
        var height =  560 - 52;
        var width = 206;
        $("#attachmentCat").datagrid({
            width: width,
            height: height,//高度
            singleSelect: true,//如果为true，则只允许选择一行
            striped: true,//是否显示斑马线效果。
            rownumbers: false,//如果为true，则显示一个行号列。
            pagination: false,//是否显示分页
            pageSize: 100,
            pageList: [10, 15, 20, 25],
            method: 'post',
            idField: 'id',
            treeField: 'name',
            sortName: 'weigh',
            sortOrder: 'desc',
            url: '/admin/index/attachmentcat',
            queryParams: {},
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            nowrap: true,//如果为true，则在同一行中显示数据。设置为true可以提高加载性能。 是否换行
            selectOnCheck: false,
            checkOnSelect: true,
            columns: [[
                {field: 'name', title: '附件分类', width: '55%'},
                {field: 'action', title: '', width: '27%', formatter(val, rowData, rowIndex){
                        return  '<i onclick="attachmentCatEdit(' + rowData.id + ')" style="color: green; cursor: pointer" class="iconfont icon-bianji"></i>' +
                                '&nbsp;&nbsp;'+
                                '<i onclick="attachmentCatDelete(' + rowData.id + ')" style="color: red; cursor: pointer"  class="iconfont icon-shanchu"></i>';
                    }},
            ]],
            onClickRow: function (index, field) {
                selectAttachment();
            },
        });
    };
    attachmentCatSearch();
    attachmentSearch();
    qiniu_multiple('uploadbox<?php echo $uniqid;?>', function (res) {
        attachmentReload();
    });
</script>
